<template>
  <div class="body-wraper">
    <div class="content-wraper">
      <div class="leftad-wraper">
        <img src="../../../static/admin/login-ad.jpg"></img>
        <div style="position: absolute;right: 455px; bottom:10px; color: #A3A3A3;"></div>
      </div>
      <div class="login-wraper">
        <div class="loginbox">
          <div class="logintitle">
            免费注册
          </div>
          <div style="text-align: center; margin: 5px 0px;">立即注册，体验数字化教务管理</div>
          <div style="align-items: center; width: 100%; margin-top: 10px; ">
            <el-form ref="loginForm" :rules="rules" :model="loginForm" style="margin-top: 30px;"
              v-on:submit.native.prevent>
              <el-form-item prop="username" label="机构名称:">
                <el-input placeholder="请输入机构名称" v-model="loginForm.username"></el-input>
              </el-form-item>
              <el-form-item prop="username" label="联系电话">
                <el-input placeholder="请输入账号/手机号" v-model="loginForm.username"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%;" type="primary" native-type="submit"
                  @click.prevent="handleSubmit">立即注册</el-button>
              </el-form-item>
              <el-form-item>

                <div style="float: right;">
                  <el-button style="right:0px" type="text" @click="handle2Login">有账号，去登录</el-button>
                </div>
              </el-form-item>
            </el-form>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
   export default {
    data() {
      return {
        rules: {
          username: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }]
        },
        loginForm: {
          username: '',
          password: '',
          remember: false
        }
      }
    },
    created() {
      //检查管理权限
      if(localStorage.getItem("token")!=null && localStorage.getItem("userinfo")!=null){
        const uinfo=JSON.parse(localStorage.getItem("userinfo"));
        console.log(uinfo,uinfo.permission.includes("admin"));
        if(uinfo.permission.includes("admin")){
          this.$router.push("/admin");
        }
      }
    },
    methods: {
      handle2Login(){
        this.$router.push("/admin/login");
      },
       handleSubmit: function() {
        let _this = this;
        this.$refs['loginForm'].validate(valid => {
          if (valid) {
            let params = {
              username: this.loginForm.username,
              password: this.loginForm.password
            };
            this.api_helper.post("api/admin/user/login",params).then((res)=>{
              if(res.status==200 && res.data.code==1){
                   localStorage.setItem("token",res.data.token);
                   localStorage.setItem("userinfo",JSON.stringify(res.data.userinfo));
                   this.$router.push("/admin");
              }else{
                  this.$message.error(res.data.msg);
              }
              console.log(res);
            })

          }
        });
      }
    }
  }
</script>

<style>
  .body-wraper {
    height: 100%;
    background-size: cover;
    display: flex;
    flex-direction: row;
    background-image: url('../../../static/admin/login-bg.png');
  }

  .content-wraper {
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-shadow: 0 3px 38px 2px rgb(4 32 102 / 8%);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
  }

  .login-wraper {
    width: 460px;
    background: #fff;
    position: relative;
  }

  .loginbox {
    padding: 40px 50px;
    display: flex;
    flex-direction: column
  }

  .logintitle {
    font-size: 24px;
    color: #333;
    font-weight: 700;
    text-align: center;
  }
</style>
